<template>
  <ContainerContent :loading="loading" :pagination="pagination" @run="run">
    <template #header>
      <a-button type="primary" @click="openUpload">
        <i-icons-add />
        上传节点包
      </a-button>
    </template>
    <a-table
      ref="tableRef"
      v-bind="commonTableProps"
      :columns="columns"
      :data="data"
      @sorter-change="onSorterChange">
      <template #imprint="{ record }">
        <div class="common-box">
          <span class="truncate">{{ record.imprint }}</span>
          <i-icons-base-info
            class="table-icon text-7 hover:text-2 cursor-pointer flex-shrink-0"
            @click="open(record)" />
        </div>
      </template>
      <template #file_size="{ record }">
        {{ byteConvertSite(record.file_size) }}
      </template>
      <template #action="{ record }">
        <a-link :hoverable="false" @click="download(record)"> 下载 </a-link>
        <a-link :hoverable="false" @click="copyLink(record)"> 复制链接 </a-link>
        <a-link status="danger" :hoverable="false" @click="handDelete(record)">
          删除
        </a-link>
      </template>
    </a-table>
    <!-- <UploadVersion
      v-model:visible="visible"n
      :record="DomainRecord"
      @reload="run"></UploadVersion> -->
    <UploadZip
      v-model:visible="visible"
      :record="DomainRecord"
      @reload="run"></UploadZip>
    <ImprintDetail
      v-model:visible="imprintVisible"
      :record="imprintRecord"
      @reload="run"></ImprintDetail>
  </ContainerContent>
</template>
<script lang="ts" setup>
import type { VersionListItem } from '@/apis/model/node'
import {
  deleteApiNodeVersionApi,
  getAdminApiNodeVersionQueryListApi
} from '@/apis/modules/version'
import ContainerContent from '@/components/ContentContainer.vue'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import { useListRequest } from '@/hooks/useListRequest'
import { byteConvertSite } from '@/utils'
import { commonTableProps } from '@/utils/table'
import useTableColumn from './column'
import ImprintDetail from './components/ImprintDetail.vue'
import UploadZip from './components/UploadZip.vue'
import { useClipboard } from '@vueuse/core'

const queryParams = ref<CloudFilterBarState>({
  order: 'desc',
  sort: 'version',
  file_type: 2
})
const { visible, data: DomainRecord, open: openUpload } = usePopup()
const { visible: imprintVisible, data: imprintRecord, open } = usePopup()

const { columns } = useTableColumn()
const { data, loading, run, pagination } = useListRequest(
  getAdminApiNodeVersionQueryListApi,
  {
    params: queryParams,
    immediate: true
  }
)
const { createSortChange } = useTable(run, data)

const onSorterChange = createSortChange(queryParams)

const handDelete = (record: VersionListItem) => {
  CloudModal.error(
    {
      content: `确认删除节点包 “${record.version}” ？`,
      okText: '删除'
    },
    () =>
      deleteApiNodeVersionApi({ id: record.file_id })
        .then(() => {
          run()
          ToastUtils.success('操作成功')
        })
        .catch((error) => {
          console.error(error)
        })
  )
}

// const downloadLink = (record: VersionListItem) => {
//   return import.meta.env.VITE_BASE_URL + 'admin/api/version/' + record.file_id
// }

const download = (record: VersionListItem) => {
  window.open(
    import.meta.env.VITE_BASE_URL + 'filebox/version/' + record.file_id
  )
}

const { copy } = useClipboard({
  legacy: true
})
const copyLink = (record: VersionListItem) => {
  const origin = window.location.origin
  const link = origin + '/filebox/version/' + record.file_id
  copy(String(link))

  ToastUtils.success('复制成功')
}
</script>

<style lang="less" scoped>
.common-box {
  @apply flex gap-x-6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 0 0;
}
:deep(.text-ell) {
  flex: initial;
  width: max-content;
}
</style>
